<template>
  <div class="approve-container">
    <!-- 左侧流程导航 -->
    <div class="process-nav">
      <div class="search-box">
        <el-input placeholder="流程查询" prefix-icon="Search" v-model="searchKeyword" clearable />
        <el-button circle icon="Plus"></el-button>
      </div>
      
      <div class="process-steps">
        <div class="step-item completed">
          <div class="step-icon">
            <el-icon><Check /></el-icon>
          </div>
          <div class="step-info">
            <div class="step-name">已制定</div>
            <div class="step-person">制作人：张三</div>
          </div>
        </div>
        
        <div class="step-item active">
          <div class="step-icon">
            <span>1</span>
          </div>
          <div class="step-info">
            <div class="step-name">已审批</div>
            <div class="step-person">审批人：李四</div>
          </div>
        </div>
        
        <div class="step-item active">
          <div class="step-icon">
            <span>2</span>
          </div>
          <div class="step-info">
            <div class="step-name">已批准</div>
            <div class="step-person">批准人：王五</div>
          </div>
        </div>
        
        <div class="step-item">
          <div class="step-icon">
            <span>3</span>
          </div>
          <div class="step-info">
            <div class="step-name">执行结果</div>
            <div class="step-person">合格</div>
            <div class="step-desc">情况说明</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 中间内容区域 -->
    <div class="main-content">
      <!-- 顶部操作按钮 -->
      <div class="action-bar">
        <div class="left-actions">
          <el-button type="primary">完善</el-button>
          <el-button type="primary">签字</el-button>
        </div>
      </div>
      
      <!-- 步骤导航 -->
      <div class="steps-container">
        <el-steps :active="2" finish-status="success">
          <el-step title="制定文件" />
          <el-step title="审批" />
          <el-step title="批准执行" />
        </el-steps>
      </div>
      
      <!-- 表单区域 -->
      <div class="form-container">
        <el-form :model="formData" label-width="120px" label-position="right">
          <el-form-item label="文件类型:">
            <el-select v-model="formData.fileType" placeholder="工作计划">
              <el-option label="工作计划" value="workplan" />
              <el-option label="质量计划" value="qualityplan" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="执行部门:">
            <div class="dept-input">
              <el-input v-model="formData.department" placeholder="中心" />
              <span class="dept-divider">×</span>
              <el-input v-model="formData.subDepartment" placeholder="部门" />
            </div>
          </el-form-item>
          
          <el-form-item label="文件名称:">
            <el-input v-model="formData.fileName" placeholder="请输入" />
          </el-form-item>
          
          <el-form-item label="文件内容:">
            <el-input
              v-model="formData.fileContent"
              type="textarea"
              :rows="6"
              placeholder="请输入"
            />
          </el-form-item>
          
          <el-form-item label="附件文件:">
            <div class="upload-container">
              <el-input v-model="formData.attachment" placeholder="在线编辑文件" readonly />
              <el-button type="primary" class="upload-btn">下载文件</el-button>
              <el-button type="primary" class="upload-btn">在线查看</el-button>
            </div>
          </el-form-item>
          
          <el-form-item label="审批意见:">
            <el-input
              v-model="formData.approvalOpinion"
              type="textarea"
              :rows="3"
              placeholder="请输入"
            />
          </el-form-item>
          
          <el-form-item>
            <div class="form-actions">
              <el-button @click="handleReturn">返回</el-button>
              <el-button type="primary" @click="handleSubmit">提交审批</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <!-- 右侧附件列表 -->
    <div class="attachment-sidebar">
      <div class="sidebar-header">
        <span>附件列表</span>
      </div>
      
      <div class="attachment-list">
        <div class="attachment-item">
          <a href="#" class="attachment-link">质量管理报告附件1</a>
        </div>
        <div class="attachment-item">
          <a href="#" class="attachment-link">修改附件列表</a>
        </div>
        <div class="attachment-item">
          <a href="#" class="attachment-link">质量管理报告附件1</a>
        </div>
      </div>
      
      <div class="preview-section">
        <div class="preview-title">签字</div>
        <div class="preview-image">
          <img src="http://img.dlwjdh.com/upload/12304/231011/7ba466c93843aa8874d59a1b377fd674.jpg" alt="签字" />
        </div>
        
        <div class="preview-title">签章</div>
        <div class="preview-image">
          <img src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=d51433e84f4a20a4314b34c3a562b414/a50f4bfbfbedab64954d263af736afc379311e08.jpg" alt="签章" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Check, Search, Plus } from '@element-plus/icons-vue'

// 搜索关键词
const searchKeyword = ref('')

// 表单数据
const formData = reactive({
  fileType: '工作计划',
  department: '中心',
  subDepartment: '部门',
  fileName: '',
  fileContent: '',
  attachment: '在线编辑文件',
  approvalOpinion: ''
})

// 返回上一步
const handleReturn = () => {
  console.log('返回')
}

// 提交审批
const handleSubmit = () => {
  console.log('提交审批', formData)
}
</script>

<style lang="less" scoped>
.approve-container {
  display: flex;
  height: 100%;
  background-color: #f5f7fa;
}

.process-nav {
  width: 180px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  
  .search-box {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    
    .el-input {
      flex: 1;
      margin-right: 5px;
    }
  }
  
  .process-steps {
    flex: 1;
    overflow: auto;
    padding: 10px;
    
    .step-item {
      display: flex;
      margin-bottom: 20px;
      position: relative;
      
      &:not(:last-child):after {
        content: '';
        position: absolute;
        left: 15px;
        top: 30px;
        height: calc(100% - 10px);
        width: 1px;
        background-color: #dcdfe6;
      }
      
      &.completed .step-icon {
        background-color: #67c23a;
      }
      
      &.active .step-icon {
        background-color: #409eff;
      }
      
      .step-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #909399;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        z-index: 1;
      }
      
      .step-info {
        flex: 1;
        
        .step-name {
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .step-person, .step-desc {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}

.main-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  
  .action-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .steps-container {
    margin-bottom: 20px;
  }
  
  .form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    
    .dept-input {
      display: flex;
      align-items: center;
      
      .el-input {
        flex: 1;
      }
      
      .dept-divider {
        margin: 0 10px;
        color: #909399;
      }
    }
    
    .upload-container {
      display: flex;
      
      .el-input {
        flex: 1;
        margin-right: 10px;
      }
      
      .upload-btn {
        margin-right: 10px;
      }
    }
    
    .form-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }
  }
}

.attachment-sidebar {
  width: 220px;
  background-color: #fff;
  border-left: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
  
  .sidebar-header {
    padding: 15px;
    font-weight: bold;
    color: #409eff;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
  }
  
  .attachment-list {
    padding: 15px;
    
    .attachment-item {
      margin-bottom: 15px;
      
      .attachment-link {
        color: #409eff;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
  
  .preview-section {
    padding: 15px;
    
    .preview-title {
      text-align: center;
      margin-bottom: 10px;
      font-weight: bold;
    }
    
    .preview-image {
      margin-bottom: 20px;
      text-align: center;
      
      img {
        max-width: 100%;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
      }
    }
  }
}
</style>